<html>

<head>
    <meta charset="UTF-8">
    <title>列表展示</title>
    <link type="text/css" rel="stylesheet" href="./css/global.css">
    <link type="text/css" rel="stylesheet" href="./css/form.css">
    <link type="text/css" rel="stylesheet" href="./js/page/Pager3.css">
    <script src="./js/jquery-3.1.1.min.js"></script>

    <script type="text/javascript" charset="UTF-8" src="./js/page/jquery.pager.js"></script>
    <script type="text/javascript" language="javascript">
        String.format = function() {
            if (arguments.length == 0)
                return null;

            var str = arguments[0];
            for (var i = 1; i < arguments.length; i++) {
                var re = new RegExp('\\{' + (i - 1) + '\\}', 'gm');
                str = str.replace(re, arguments[i]);
            }
            return str;
        };
        $(document).ready(function() {
            $("#pager").pager({
                pagenumber: 1,
                pagecount: 15,
                buttonClickCallback: PageClick
            });
            //$("#result").html(createHtml(1, 15));
        });

        PageClick = function(pageclickednumber) {
            $("#pager").pager({
                pagenumber: pageclickednumber,
                pagecount: 15,
                buttonClickCallback: PageClick
            });
            $("#result").html(createHtml(pageclickednumber, 15));
        };

        function createHtml(pagenumber, pagesize) {
            var result = "";
            var formatstr = "<li><em>{0}</em><cite><a href=\"#\">{1}</a></cite><span>{2}</span></li>";
            for (var i = (pagenumber - 1) * pagesize + 1; i <= pagenumber * pagesize; i++) {
                result += String.format(formatstr, i, "标题内容标题内容" + i, '2020-9-1');
            }

            return result;

        }
    </script>
</head>

<body>
    <div class="topbanner bgblack"></div>
    <div class="menu">
        <ul>
            <li><a href="index.html">首页</a> </li>
            <li><a href="content.html">内容页</a></li>
            <li><a href="register.html">注册页</a></li>
            <li><a href="list.html">列表页</a></li>
            <li><a href="list2.html">列表样式2</a></li>
            <li><a href="list3.html">列表样式3</a></li>
        </ul>
    </div>
    <div class="form">
        <div class="blockleft">
            <dl class="listitem" id="result">
                <dt><a href="#">主标题描述内容主标题描述</a></dt>
                <dd>文字描述：javascript,为学员提供海量免费java教程,高质量视频课程及图文教程,颠覆传统教学模式,随时随地,快学快用,javascript,为学员提供海量免费java教程,高质量视频课程及图文教程,颠覆传统教学模式,随时随地,快学快用,0基础就业班快速就业...<em>&nbsp;&nbsp;2020-9-10</em>

                </dd>

                <dt><a href="#">主标题描述内容主标题描述</a></dt>
                <dd><img src="images/ms1.png" width="80" height="80">文字描述：javascript,为学员提供海量免费java教程,高质量视频课程及图文教程,颠覆传统教学模式,随时随地,快学快用,javascript,为学员提供海量免费java教程,高质量视频课程及图文教程,颠覆传统教学模式,随时随地,快学快用,0基础就业班快速就业...<em>&nbsp;&nbsp;2020-9-10</em>

                </dd>

                <dt><a href="#">主标题描述内容主标题描述</a></dt>
                <dd>文字描述：javascript,为学员提供海量免费java教程,高质量视频课程及图文教程,颠覆传统教学模式,随时随地,快学快用,javascript,为学员提供海量免费java教程,高质量视频课程及图文教程,颠覆传统教学模式,随时随地,快学快用,0基础就业班快速就业...<em>&nbsp;&nbsp;2020-9-10</em>

                </dd>

                <dt><a href="#">主标题描述内容主标题描述</a></dt>
                <dd>文字描述：javascript,为学员提供海量免费java教程,高质量视频课程及图文教程,颠覆传统教学模式,随时随地,快学快用,javascript,为学员提供海量免费java教程,高质量视频课程及图文教程,颠覆传统教学模式,随时随地,快学快用,0基础就业班快速就业...<em>&nbsp;&nbsp;2020-9-10</em>

                </dd>

                <dt><a href="#">主标题描述内容主标题描述</a></dt>
                <dd><img src="images/ms1.png" width="80" height="80">文字描述：javascript,为学员提供海量免费java教程,高质量视频课程及图文教程,颠覆传统教学模式,随时随地,快学快用,javascript,为学员提供海量免费java教程,高质量视频课程及图文教程,颠覆传统教学模式,随时随地,快学快用,0基础就业班快速就业...<em>&nbsp;&nbsp;2020-9-10</em>

                </dd>

                <dt><a href="#">主标题描述内容主标题描述</a></dt>
                <dd>文字描述：javascript,为学员提供海量免费java教程,高质量视频课程及图文教程,颠覆传统教学模式,随时随地,快学快用,javascript,为学员提供海量免费java教程,高质量视频课程及图文教程,颠覆传统教学模式,随时随地,快学快用,0基础就业班快速就业...<em>&nbsp;&nbsp;2020-9-10</em>

                </dd>

                <dt><a href="#">主标题描述内容主标题描述</a></dt>
                <dd>文字描述：javascript,为学员提供海量免费java教程,高质量视频课程及图文教程,颠覆传统教学模式,随时随地,快学快用,javascript,为学员提供海量免费java教程,高质量视频课程及图文教程,颠覆传统教学模式,随时随地,快学快用,0基础就业班快速就业...<em>&nbsp;&nbsp;2020-9-10</em>

                </dd>

                <dt><a href="#">主标题描述内容主标题描述</a></dt>
                <dd>文字描述：javascript,为学员提供海量免费java教程,高质量视频课程及图文教程,颠覆传统教学模式,随时随地,快学快用,javascript,为学员提供海量免费java教程,高质量视频课程及图文教程,颠覆传统教学模式,随时随地,快学快用,0基础就业班快速就业...<em>&nbsp;&nbsp;2020-9-10</em>

                </dd>

                <dt><a href="#">主标题描述内容主标题描述</a></dt>
                <dd>文字描述：javascript,为学员提供海量免费java教程,高质量视频课程及图文教程,颠覆传统教学模式,随时随地,快学快用,javascript,为学员提供海量免费java教程,高质量视频课程及图文教程,颠覆传统教学模式,随时随地,快学快用,0基础就业班快速就业...<em>&nbsp;&nbsp;2020-9-10</em>

                </dd>

                <dt><a href="#">主标题描述内容主标题描述</a></dt>
                <dd>文字描述：javascript,为学员提供海量免费java教程,高质量视频课程及图文教程,颠覆传统教学模式,随时随地,快学快用,javascript,为学员提供海量免费java教程,高质量视频课程及图文教程,颠覆传统教学模式,随时随地,快学快用,0基础就业班快速就业...<em>&nbsp;&nbsp;2020-9-10</em>

                </dd>

            </dl>
            <div id="pager"></div>
        </div>
        <div class="blockright">
            <ul class="listitemright">
                <li><img src="./images/ms1.png" width="200" height="100">
                    <p><a href="#">内容标题内容标题</a></p>
                </li>
                <li><img src="./images/ms1.png" width="200" height="100">
                    <p><a href="#">内容标题内容标题</a></p>
                </li>
                <li><img src="./images/ms1.png" width="200" height="100">
                    <p><a href="#">内容标题内容标题</a></p>
                </li>
            </ul>
        </div>
    </div>
    <div class="bottom">
        <div class="bottom-top">☆极客晨星☆ Python Web开发实战培训</div>
        <div class="bottom-content">冀ICP 000000000号</div>
        <div class="bottom-bottom">2020.8 张家口</div>
    </div>
    <!--<div class="fixbutton"><button id="fixbutton" onclick="sayhello();">你好！</button></div>-->
</body>

</html>